<template>
  <div v-if="dialog">
    <!-- 遮罩层 -->
    <div class="black" @click="close"></div> 
    <!-- 弹出层 -->
    <div class="dialog">
      <span style="color:#c69c6c;font-size:20px;">添加收货地址</span>
      <span @click="close" style="float:right;font-size:20px;"><i class="el-icon-close"></i></span>
      <br/><br/>
      <span>用户名称：</span>
      <el-input placeholder="请输入收货人名称" v-model="addressInfo.user"></el-input><br/>
      <span>联系电话：</span><el-input v-model="addressInfo.tel" placeholder="请输入联系电话"></el-input><br/>
      <span>所在区域：</span>
      <ve-cascader  v-model="cregion"></ve-cascader><br/>
      <span>详细地址：</span>
      <el-input v-model="addressInfo.detail" placeholder="请输入所在区域详细地址" style="width:80%;"></el-input>
      <button @click="addAddress()" style="font-size:16px;font-weight:100;">添加</button>
    </div>

  </div>
</template>

<script>
import {reqAddressAdd,reqAddressPerson} from '../../api'
export default {
  name:'Dialog',
  data() {
    return {
      dialog:false,
      addressInfo:{user:'',tel:'',detail:''},
      cregion:{}
    }
  },
  methods: {
    close(){
      this.dialog = false
    },
    open(){
      this.dialog = true
    },
    async addAddress(){ //添加收货地址
      let str = ''
      if(this.addressInfo.tel === '' || this.addressInfo.user === "" || this.addressInfo.detail === "" || this.cregion.names.length === 0){
        this.$message.warning("地址未填写完整！")
      }else{
        this.cregion.names.forEach(item => {
          str += item
        });
        const token = this.$local.get('key')
        let add = await reqAddressAdd(token,this.addressInfo.user,this.addressInfo.tel,str+' '+this.addressInfo.detail)
        if(add.msg === 'success'){
          this.$message.success('地址添加成功！')
          this.dialog = false
          let sendAddress = await reqAddressPerson(this.$local.get('key'))
          this.$bus.$emit('updateAddress',sendAddress)
        }else{
          this.$message.error('地址添加失败！')
        }
      }
    }
  },
}
</script>

<style>
  .black{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0.5;
    top: 0;
    left: 0;
    background: #000000;
  }
  .dialog{
    position: fixed;
    width: 480px;
    z-index: 1000;
    background: #ffffff;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    padding: 15px;
    margin: -160px 0 0 -240px;
    /* 0.4s完成transform移动效果*/
    transition: transform 0.2s linear 0s;
    transition: all 2s;
  }
  .el-input{
    /* border: 1px solid grey; */
    border-radius: 4px;
    width: 200px;
    margin-bottom:10px;
    /* background: #F8F6F6; */
  }
  el-input:focus{
    border: 1px solid #c69c6c;
  }
</style>